import { useEffect, useState } from 'react';
import { getSystemInfoSync, getMenuButtonBoundingClientRect } from '@tarojs/taro';

const toPX = (value: number) => {
    const clientWidth = getSystemInfoSync().windowWidth;
    return (value * clientWidth) / 750;
};
const isH5 = process.env.TARO_ENV === 'h5';
const DEFAULT_TITLE_BAR_HEIGHT = toPX(88); // 默认的title栏高度
export function useNavBarHeight() {
    const [navInfo, setNavInfo] = useState({
        navBarHeight: isH5 ? 0 : DEFAULT_TITLE_BAR_HEIGHT,
        statusBarHeight: 0,
        titleBarHeight: isH5 ? 0 : DEFAULT_TITLE_BAR_HEIGHT
    });

    useEffect(() => {
        if (isH5) return;
        const menuButtonInfo = getMenuButtonBoundingClientRect();
        const systemInfo = getSystemInfoSync();

        const statusBarHeight = systemInfo.statusBarHeight || 0;
        const titleBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height;
        const navBarHeight = statusBarHeight + titleBarHeight;

        setNavInfo({
            navBarHeight,
            statusBarHeight,
            titleBarHeight
        });
    }, []);

    return navInfo;
}
